<template>
    <div>
        <el-card class="box-card" shadow="never">
            <!--导航栏-->
            <el-page-header @back="back" :content="content">
            </el-page-header>
            <el-form ref="form" class="edit-el-form"  :model="form" :rules="rules" label-width="auto">
                <el-form-item label="站点名称" prop="department_name">
                    <el-input v-model="form.department_name" required></el-input>
                </el-form-item>
                <el-row>
                  <VMap :show_map="show_map" :amap_center="amap_center" :amap_markers="amap_markers" :catch_map="catch_map" :remove_markers="remove_markers"></VMap>
                </el-row>
                <el-row :gutter='12'>
                  <el-col :span='11'>
                    <el-form-item label="X坐标" prop="x_coordinate">
                        <el-input v-model="form.x_coordinate"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span='11'>
                    <el-form-item label="Y坐标" prop="y_coordinate">
                        <el-input v-model="form.y_coordinate"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-form-item label="状态">
                    <el-radio-group v-model="form.enabled">
                        <el-radio border label="0">禁用</el-radio>
                        <el-radio border label="1">正常</el-radio>
                    </el-radio-group>
                </el-form-item>

                <!--查看不展示按钮-->
                <el-form-item v-if="edit_type!=0">
                    <el-button type="primary" @click="submitForm('form')" :loading="loading">{{button_name}}</el-button>
                    <el-button @click="back">取消</el-button>
                </el-form-item>
            </el-form>
        </el-card>

    </div>
</template>

<script>
    import { editMap,getMapInfo } from '@/api/map.js'
    import VMap from '@/components/VMap.vue';
    export default {
        name:'MapEdit',
        components:{VMap},
        data() {
            return {
                form: {
                    department_name: '',
                    x_coordinate:'',
                    y_coordinate:'',
                    enabled: '1',
                },
                //校验规则
                rules:{
                    department_name: [
                        { required:true , message:'请输入站点名称',trigger:'blur' }
                    ],
                    x_coordinate:[
                        { required:true , message:'请输入X坐标',trigger:'blur' }
                    ],
                    y_coordinate:[
                        { required:true , message:'请输入Y坐标',trigger:'blur' }
                    ]
                },
                //加载组件
                loading: false,
                button_name:'立即提交',
                content:'地址添加',
                show_map:false,
                amap_center:[111.733455,40.842442],  //呼和浩特坐标
                amap_markers:[]
            }
        },
        methods: {
            submitForm(formName){
                let that = this;
                    this.$refs[formName].validate((valid) => {
                            if (valid) {
                                this.loading=true;
                                this.button_name='正在提交';
                                var send_data={
                                    department_name:this.form.department_name,
                                    x_coordinate:this.form.x_coordinate,
                                    y_coordinate:this.form.y_coordinate,
                                    enabled:this.form.enabled,
                                };
                                if(this.id!=-1){
                                    send_data.id=this.id;
                                }
                                editMap(send_data).then(function(response){
                                    let code=response.data.code;
                                    let type=code==1?'success':'error';
                                    that.$message({
                                        message:response.data.msg,
                                        type:type,
                                        onClose:function(e){
                                            that.loading=false;
                                            if(code==1){
                                              that.$router.push('/map/maplist');
                                            }else{
                                              that.button_name='立即提交';
                                            }

                                        }
                                    });
                                })
                            }else{
                                setTimeout(()=>{
                                  const is_error=document.getElementsByClassName('is-error');
                                  is_error[0].querySelector('input,button').focus();
                                },100);
                                return false;
                            }
                    })
            },
            back(){
                this.$router.go(-1);
            },
            //获取地图坐标,并且标点
            catch_map(x,y){
               this.amap_markers.push([x, y]);
               this.form.x_coordinate=x;
               this.form.y_coordinate=y;
            },
            //移除标点
            remove_markers(){
               this.amap_markers=[];
            }
        },
        created(){
            if(this.id!=-1){
                var send_data={
                    id:this.id
                }
                let that=this;
                getMapInfo(send_data).then(function(response){
                    if(response.data.code==1){
                        let val=response.data.info;
                        that.form.department_name=val.department_name;
                        that.form.x_coordinate=val.x_coordinate;
                        that.form.y_coordinate=val.y_coordinate;
                        that.form.enabled=val.enabled.toString();
                        //地图
                        if(val.x_coordinate>0 && val.y_coordinate>0){
                          that.amap_markers.push([parseFloat(val.x_coordinate), parseFloat(val.y_coordinate)]);
                        }
                        that.show_map=true;
                    }
                })
            }else{
               this.show_map=true;
            }
            //修改标题
            if(this.edit_type==1){
                this.content='地址添加';
            }else if(this.edit_type==0){
                this.content='地址详情';
            }else if(this.edit_type==2){
                this.content='地址编辑';
            }
        },
        computed:{
            id(){
                return this.$route.params.id;
            },
            //是否可编辑
            edit_type(){
                return this.$route.params.edit_type;
            }
        },
    }
</script>

<style>
    .edit-el-form{
        margin-top:30px;
    }
</style>
